<template>
	<view class="container">
		<u-navbar title="录音" @rightClick="rightClick" :autoBack="true" placeholder rightText="取消"></u-navbar>
		<view class="sound-work">
			<view class="timing">
				{{intIntervalTime}}
			</view>
			<view class="inner-content">
				<view class="voice-line-wrap" ref="line"
					:style="{ '--line-height': upx2px(100), '--line-start-color': '#f4a81b', '--line-end-color': '#f9f7ff', '--startState': startState()}">
					<view class="voice-line one3"></view>
					<view class="voice-line one2"></view>
					<view class="voice-line one1"></view>
					<view class="voice-line one"></view>
					<view class="voice-line two"></view>
					<view class="voice-line three"></view>
					<view class="voice-line four"></view>
					<view class="voice-line five"></view>
					<view class="voice-line six"></view>
					<view class="voice-line seven"></view>
					<view class="voice-line six"></view>
					<view class="voice-line five"></view>
					<view class="voice-line four"></view>
					<view class="voice-line three"></view>
					<view class="voice-line two"></view>
					<view class="voice-line one"></view>
					<view class="voice-line one1"></view>
					<view class="voice-line one2"></view>
					<view class="voice-line one3"></view>
				</view>
			</view>
			<view class="btn-box">
				<view class="f-cen-cen"  v-if="type == 'continue'">
					<view class="left-box f-col-cen" @click="reopen">
						<image lazy-load src="../../../static/icon/creationSound.png" mode="widthFix"></image>
						<text class="mt10">重新</text>
					</view>
					<view class="start-box f-col-cen" v-if="playAudio"  @click="play">
						<image lazy-load src="../../../static/icon/continuousSound.png" mode="widthFix"></image>
						<text class="mt10">播放</text>
					</view>
					<view class="start-box f-col-cen" v-else @click="play">  
						<image lazy-load src="../../../static/icon/suspendSound.png" mode="widthFix"></image>
						<text class="mt10">暂停</text>
					</view>
					<view class="left-box f-col-cen" @click="success">
						<image lazy-load src="../../../static/icon/successSound.png" mode="widthFix"></image>
						<text class="mt10">完成</text>
					</view>
				</view>
				<view class="start-box f-col-cen" v-if="type == 'loading'" @click="endRecord">
					<image lazy-load src="../../../static/icon/suspendSound.png" mode="widthFix"></image>
					<text class="mt10">暂停录音</text>
				</view>
				<view class="start-box f-col-cen" v-if="type == 'start'" @click="startRecord">
					<image lazy-load src="../../../static/icon/startSound.png" mode="widthFix"></image>
					<text class="mt10">开始录音</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {checkPermission} from '@/store/upload.js'
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				time: 1000000,
				type: 'start', // start  loading  continue
				voicePath: "", // 录音地址
				isRecord: false, // 记录状态,录音中或者是未开始
				intervalTime: 0,
				timer: null,
				playAudio: true,
				element: [],
			};
		},
		computed: {
			intIntervalTime() {
				// 用于显示整数的秒数
				return dayjs(this.intervalTime * 1000).format("mm:ss")
			}
		},
		onLoad() {
			let self = this;
			recorderManager.onStop(function(res) {
				self.voicePath = res.tempFilePath;
			});
			innerAudioContext.onEnded(() => {
				this.playAudio = true
			})
		},
		methods: {
			// 开始录音
			startRecord() {
				checkPermission().then(res => {
					this.type = 'loading'
					this.timer = setInterval(() => {
						this.intervalTime += 0.5;
						if (this.intervalTime >= 0.5 && !this.isRecord) {
							//如果用户录制的时间太短,就不会去开启录音, 因为有个bug: recorderManager.stop()在短时间内开启在关闭的话,实际上他还在不停地录音,不知道你们有没有遇到过
							this.isRecord = true;
							this.intervalTime = 0;
							recorderManager.start({
								duration: 10000, //指定录音的时长，单位 ms
								format: "mp3",
							});
						}
						if (this.intervalTime >= 60) {
							this.endRecord();
						}
					}, 500);
				})
			},
			// 结束录音
			endRecord(type) {
				this.type = 'continue'
				clearInterval(this.timer);
				if (this.intervalTime <= 0.5) {
					uni.$u.toast('录音太短');
				} else if (this.intervalTime >= 60) {
					uni.$u.toast('最长60s录音');
				}
				if (this.isRecord) {
					uni.hideToast()
					setTimeout(() => {
						recorderManager.stop();
						this.isRecord = false;
					}, 500); //延迟小段时间停止录音, 更好的体验
				}
			},
			// 重新录音
			reopen() {
				this.type = 'start'
				this.voicePath = ''
			},
			// 播放录音
			play() {
				if (this.voicePath) {
					if (this.playAudio) {
						innerAudioContext.src = this.voicePath;
						innerAudioContext.play();
					} else {
						innerAudioContext.stop();
					}
					this.playAudio = !this.playAudio
				}
			},
			// 完成录音
			success() {
				 
				if (!this.voicePath) return uni.$u.toast('录音时间较短，请重新录音');
				uni.$emit('successPath', this.voicePath)
				uni.navigateBack()
			},
			startState() {
				let str = ''
				switch (this.type) {
					case 'start':
						str = 'paused';
						break;
					case 'continue':
						str = this.playAudio ? 'paused' : 'running';
						break;
					case 'loading':
						str = 'running';
						break;
				}
				return str
			},
			rightClick() {
				uni.navigateBack()
			},
			upx2px(upx) {
				return uni.upx2px(upx) + 'px';
			},
		},
		onBackPress() {
			clearInterval(this.timer);
			recorderManager.stop();
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
	}

	.sound-work {
		width: 100vw;
		height: 85vh;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		

		.timing {
			text-align: center;
			font-size: 45rpx;
		}

		.btn-box {
			font-size: 26rpx;
        .f-cen-cen{
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
			.start-box {
			 margin: 0 30rpx;
              display: flex;
			  text-align: center;
			  align-items: center;
		      flex-direction: column;
			  justify-content: center;
				image {
					width: 120rpx;
					display: block;
					margin-bottom: 10rpx;
				}
			}
              
			.left-box {
				display: flex;
				text-align: center;
				 align-items: center;
				flex-direction: column;
				justify-content: center;
				image {
					display: block;
					width: 80rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}


	.inner-content {
		height: var(--popup-height);
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		.title {
			font-weight: bold;
			padding: 20rpx 0;
		}

		.tips {
			color: #999;
			padding: 20rpx 0;
		}
	}

	.voice-line-wrap {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 200rpx; /* 调整高度 */

		
 
		.one3 {
			animation: wave 0.4s 1s linear infinite alternate;
		}

		.one2 {
			animation: wave 0.4s 0.9s linear infinite alternate;
		}

		.one1 {
			animation: wave 0.4s 0.8s linear infinite alternate;
		}

		.one {
			animation: wave 0.4s 0.7s linear infinite alternate;
		}

		.two {
			animation: wave 0.4s 0.6s linear infinite alternate;
		}

		.three {
			animation: wave 0.4s 0.5s linear infinite alternate;
		}

		.four {
			animation: wave 0.4s 0.4s linear infinite alternate;
		}

		.five {
			animation: wave 0.4s 0.3s linear infinite alternate;
		}

		.six {
			animation: wave 0.4s 0.2s linear infinite alternate;
		}

		.seven {
			animation: wave 0.4s linear infinite alternate;
		}
		.voice-line {
			width: 7rpx;
			height: var(--line-height);
			border-radius: 3rpx;
			margin: 0 8rpx;
			animation-play-state: var(--startState);
		}
	}

	@keyframes wave {
		0% {
			transform: scale(1, 1);
			background-color: var(--line-start-color);
		}

		100% {
			transform: scale(1, 0.3);
			background-color: var(--line-end-color);
		}
	}
</style>
<style>
	page {
		background-color: #fff;
	}
</style>